<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="开始日期">
        <el-date-picker v-model="queryParams.startDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
          @change="handleQuery" />
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
          @change="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="施工类型">
        <el-input v-model="queryParams.construction_name" placeholder="输入施工类型" @input="handleQuery"
          @keyup.enter="handleQuery"> </el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" max-height="500" stripe class="className"
      :header-cell-style="{
        height: '100px',
        color: '#000000',
      }" :cell-style="{ padding: '20px' }">
      <el-table-column prop="construction_name" width="180" label="施工类型" align="center" />
      <el-table-column prop="number" width="180" label="井次" align="center" />
      <el-table-column prop="constructionDays" width="180" label="施工天数" align="center" />
      <el-table-column prop="outputValue" width="180" label="产值" align="center" />
      <el-table-column prop="cost" width="180" label="2023单井成本" align="center" />
      <el-table-column prop="profit" width="180" label="利润" align="center" />
      <el-table-column prop="welloutputValue" width="180" label="单井产值" align="center" />
      <el-table-column prop="wellCost" width="180" label="单井成本" align="center" />
      <el-table-column prop="wellprofit" width="180" label="单井利润" align="center" />
      <el-table-column prop="wellProfitargin" width="180" label="利润率" align="center" />
      <el-table-column prop="wellProfitDay" width="180" label="利润/天" align="center" />
      <el-table-column prop="accountName" width="180" label="单井固定成本" align="center" />
      <el-table-column prop="accountName" width="180" label="单井变动成本" align="center" />
      <el-table-column prop="accountName" width="180" label="平均占井周期" align="center" />
      <el-table-column prop="accountName" width="180" label="单井边际效益" align="center" />
      <el-table-column prop="accountName" width="180" label="2023年固定成本" align="center" />
      <el-table-column prop="accountName" width="180" label="2023年变动成本" align="center" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { completionList } from "@/api/cost/completion";


// 表格数据
const tableData = ref([]);
const tableColumn = ref([]);
const loading = ref(false);

// 获取上月今天到这个月今天
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
const thisMonth = new Date(now.getFullYear(), now.getMonth(), now.getDate());

// 格式化日期为字符串
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
const queryParams = ref({
  startDate: formatDate(lastMonth),
  endDate: formatDate(thisMonth)
});

//获取列表数据
const getList = () => {
  console.log('hhh', queryParams.value);
  loading.value = true;
  completionList(queryParams.value)
    .then((res) => {
      tableData.value = res.data;
      loading.value = false;
    })
    .catch((error) => {
      console.log(error);
    });
};

/**导出按钮操作 */
function handleExport() {
  proxy.download(
    "/system/management/export",
    {
      ...queryParams.value,
    },
    `项目列表.xlsx`
  );
}

//查询列表
const handleQuery = () => {
  getList()
};

getList();
</script>

<style lang="scss" scoped>
.app-container h2 {
  color: #1890FF;
  margin: 20px 0;
}

.className :empty::before {
  content: "--";
  color: gray;
}

.el-row {
  margin-bottom: 20px;
}

.search-form {
  padding-left: 20px;
}

.el-width {
  width: 340px;
}
</style>
